<template>
  <view class="safe-box flex-box-page box-bg">
    <Tabs v-model="tabIndex" :list="tabs" @change="tabChange"></Tabs>
    <List :status="status" class="list">
      <view class="list-item me-card" v-for="(item, i) in list" :key="item._id">
        <view class="main" @click="$nav.to('/pages/goods-detail/goods-detail', {
                    id: item._id
                })">
          <u--image :showLoading="true" :src="joinDomain(item.pictures[0].url)" width="80px" height="80px" @click="click">
          </u--image>
          <view class="info">
            <view class="title two-line-clamp">{{item.title}}</view>
            <view class="price">￥{{item.price}}</view>
          </view>
        </view>
        <view class="footer">
          <text>创建时间：</text>
          <text>{{item.createTime}}</text>
        </view>
        <view class="handle">
          <view class="btn" v-if="![goodsState.overdue, goodsState.pending].includes(item.state)" @click="edit(item._id)">
            <u-button type="primary" size="mini" text="编辑"></u-button>
          </view>
          <view class="btn" v-if="item.state === goodsState.suspensive" @click="start(item._id)">
            <u-button type="primary" size="mini" text="上架"></u-button>
          </view>
          <view class="btn" v-if="item.state === goodsState.published" @click="pause(item._id)">
            <u-button type="primary" size="mini" text="下架"></u-button>
          </view>
          <view class="btn" @click="show = true">
            <u-button type="error" text="删除" size="mini"></u-button>
          </view>
        </view>
        <Modal showCancelButton closeOnClickOverlay v-model="show" title="提示" :content='`确认删除吗？`' @confirm="del(item._id)"></Modal>
      </view>
    </List>
  </view>
</template>

<script>
  // import ListItem from './components/list-item.vue'
  export default {
    components: {
      // ListItem
    },
    data() {
      return {
        show: false,
        status: 'loadmore',
        query: {
          index: 1,
          size: 20
        },
        tabIndex: 0,
        list: []
      }
    },
    computed: {
      goodsState() {
        return this.$store.state.goodsState
      },
      tabs() {
        const list = []
        const obj = this.goodsState
        for(let k in obj) {
          list.push({
            id: k,
            name: obj[k]
          })
        }
        return list.slice(0,list.length / 2)
      }
    },
    methods: {
      // reset:boolean 是否重置列表数据
      async getList(reset = false) {
        if(reset) this.list = []
        const res = await this.$http.get('/goods', {
          ...this.query,
          state: this.tabs[this.tabIndex].id
        })
        this.list = [...this.list, ...res.data.records]
        this.status = res.data.records.length < this.query.size ? 'nomore' : 'loadmore'
      },
      tabChange(e) {
        this.tabIndex = e.index
        this.getList(true)
      },
      del(id) {
        this.$http.delete('/goods', {
          id
        }).then(() => {
          this.show = false
          this.getList(true)
        })
      },
      // 下架
      pause(id) {
        this.$http.put('/goods', {
          id,
          state: this.goodsState.suspensive
        }).then(() => {
          this.getList(true)
        })
      },
      // 上架
      start(id) {
        this.$http.put('/goods', {
          id,
          state: this.goodsState.pending
        }).then(() => {
          this.getList(true)
        })
      },
      edit(id) {
        this.$nav.redirectTo('/pages/upload-goods/upload-goods', {
          id
        })
      }
    },
    onLoad() {
      this.getList()
    }
  }
</script>

<style lang="scss" scoped>
  .list-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 20rpx;
  
    .main {
      display: flex;
    }
  
    .info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 10rpx 20rpx;
    }
  
    .handle {
      margin-top: 20rpx;
      display: flex;
  
      .btn {
        // display: inline-block;
        // width: 200rpx;
        // width: 20%;
        margin-right: 20rpx;
      }
    }
  
    .footer {
      color: $uni-text-color-grey;
      font-size: $me-text-min-size;
      margin-top: 10rpx;
    }
  }
</style>
